<template>
  <div>
    <el-dialog
      :title="title"
      v-model="Replace_host"
      width="35%"
      top="5%"
      @close="handleclose"
      :close-on-click-modal="false"
    >
      <el-form label-width="120px">
        <div class="colorblue" @click="handleAllhigCurrent">
          {{ defaultExpand ? "收起全部" : "全部展开" }}
        </div>

        <el-form-item label="数据权限" :required="true">
          <el-tree
            v-if="openOrNot"
            :data="setList"
            show-checkbox
            @check="check"
            ref="eltreedata"
            :default-expand-all="defaultExpand"
            current-node-key="areaCode"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            node-key="areaCode"
            :props="{
              checkStrictly: true,
              label: 'areaName',
              children: 'child',
              value: 'areaCode',
            }"
          >
          </el-tree>
        </el-form-item>
        <el-form-item label="功能权限" :required="true">
          <el-tree
            v-if="openOrNot"
            :data="setListData"
            show-checkbox
            node-key="id"
            :default-expand-all="defaultExpand"
            @check="check"
            ref="eltree"
            current-node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps"
          >
          </el-tree>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="Replace_host = false">取 消</el-button>
          <el-button type="primary" @click="selectBt">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { ref, reactive, getCurrentInstance, onMounted, nextTick } from "vue";
import { dictionaries } from "../assets/js/dictionaries";
import { ElMessage, ElMessageBox } from "element-plus";
import api from "../api/api";
export default {
  components: {},
  name: "childeltree",
  setup(props, context) {
    // console.log(context);
    let { proxy } = getCurrentInstance();
    const Replace_host = ref(context.attrs.Replace_host);
    const title = context.attrs.title;
    const setList = context.attrs.setList;
    const setListData = context.attrs.setListData;
    console.log(setListData);
    // tree_type为1 是权限设置  为2是数据权限设置
    const tree_type = context.attrs.tree_type;
    const eltree = ref();
    const eltreedata = ref();
    onMounted(() => {
      // 初始化
      let functionList = context.attrs.functionList;
      let functionListData = context.attrs.functionListData;
      if (functionList) {
        setTimeout(function () {
          eltree.value.setCheckedKeys(functionList, true);
        }, 100);
      }
      if (functionListData) {
        setTimeout(function () {
          eltreedata.value.setCheckedKeys(functionListData, true);
        }, 100);
      }
    });
    const check = () => {
      context.emit("check");
    };
    const selectBt = () => {
      let functionList = eltree.value.getCheckedKeys(true);
      let functionListData = eltreedata.value.getCheckedKeys(true);
      context.emit("selectBt", functionList, functionListData);
    };
    const handleclose = () => {
      Replace_host.value = false;
      context.emit("handleclose", Replace_host.value);
    };
    const defaultExpand = ref(false);
    const openOrNot = ref(true);
    const handleAllhigCurrent = () => {
      openOrNot.value = false;
      defaultExpand.value = !defaultExpand.value;
      nextTick(() => {
        openOrNot.value = true;
      });
    };
    return {
      Replace_host,
      setList,
      setListData,
      eltree,
      eltreedata,
      title,
      tree_type,
      defaultExpand,
      openOrNot,
      check,
      selectBt,
      handleclose,
      handleAllhigCurrent,
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/common.css";
@import "../assets/css/device.less";
</style>
